<!--
 * @Author: 黄达全
 * @Date: 2024-07-29 17:03:38
 * @LastEditTime: 2024-07-29 17:03:45
-->
<script lang="ts" setup>
import { ref } from 'vue'
import type { TabsPaneContext } from 'element-plus'
import drawer from '@/components/drawer.vue'
import ali from "./buy/ali.vue"
import wx from "./buy/wx.vue"
import useElementPlus from "@/hooks/useElementPlus"

const { message } = useElementPlus()

const activeName = ref('pay')
const tableData = [
    {
        id: 1,
        icon: "https://shop-admin-hdq.oss-cn-beijing.aliyuncs.com/815f600f-a22c-4aee-8333-322ead0c3ca7.png",
        title: "支付宝支付",
        desc: "支付宝-全球领先的独立第三方支付平台，致力于为广大用户提供安全快速的电子支付"
    },
    {
        id: 2,
        icon: "https://shop-admin-hdq.oss-cn-beijing.aliyuncs.com/c4a055bd-877b-4b05-9a91-c657eeaad851.png",
        title: "微信支付",
        desc: "微信支付提供安全快捷的支付方式，支持多种交易场景和行业解决方案，助力商家提升经营效率和用户体验。"
    }
]
const handleClick = (tab: TabsPaneContext, event: Event) => {
    console.log(tab, event)
}

const currentPayWay = ref<number>(1)
const drawerRef = ref()

const settingConfig = (id: number) => {
    currentPayWay.value = id
    drawerRef.value.open()
}

const aliRef = ref()
const wxRef = ref()
const submitHandle = () => {
    if (currentPayWay.value === 1) {
        aliRef.value.setAliConfig()
    } else if (currentPayWay.value === 2) {
        wxRef.value.setVxConfig()
    }
    drawerRef.value.close()
}

const unpaidOrderTime = ref('30')
const shippedOrderTime = ref('7')
const completedOrderTime = ref('23')

const saveShoppingSettings = () => {
    // 实现保存购物设置的逻辑
    message({
        message: "保存成功",
        type: "success"
    })
}
</script>

<template>
    <el-card class="card" :body-style="{ padding: '10px 20px 105x 20px' }">
        <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
            <el-tab-pane label="支付设置" name="pay"></el-tab-pane>
            <el-tab-pane label="购物设置" name="shopping"></el-tab-pane>
        </el-tabs>

        <!-- 支付设置 -->
        <template v-if="activeName === 'pay'">
            <el-table :data="tableData" border style="width: 100%">
                <el-table-column label="支付方式">
                    <template #default="{ row }">
                        <div class="pay-item">
                            <img :src="row.icon" alt="" class="pay-item-icon">
                            <div class="pay-item-info">
                                <div class="pay-item-title">
                                    {{ row.title }}
                                </div>
                                <div class="pay-item-desc">
                                    {{ row.desc }}
                                </div>
                            </div>
                        </div>

                    </template>

                </el-table-column>
                <el-table-column label="操作" width="180" align="center">
                    <template #default="{ row }">
                        <el-button size="small" type="primary" link @click="settingConfig(row.id)">配置</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </template>
        <!-- 购物设置 -->
        <template v-else-if="activeName === 'shopping'">
            <div class="shopping-setting">
                <div class="setting-item">
                    <div class="setting-label">未支付订单</div>
                    <div class="setting-input">
                        <el-input v-model="unpaidOrderTime" placeholder="请输入时间"></el-input>
                        <div class="setting-button">分钟后自动关闭</div>
                    </div>
                    <div class="setting-desc">订单下单未付款，n分钟后自动关闭，设置0不自动关闭</div>
                </div>
                
                <div class="setting-item">
                    <div class="setting-label">已发货订单</div>
                    <div class="setting-input">
                        <el-input v-model="shippedOrderTime" placeholder="请输入时间"></el-input>
                        <div class="setting-button">天后自动确认收货</div>
                    </div>
                    <div class="setting-desc">如果在期间未确认收货，系统自动完成收货，设置0不自动收货</div>
                </div>
                
                <div class="setting-item">
                    <div class="setting-label">已完成订单</div>
                    <div class="setting-input">
                        <el-input v-model="completedOrderTime" placeholder="请输入时间"></el-input>
                        <div class="setting-button">天内允许申请售后</div>
                    </div>
                    <div class="setting-desc">订单完成后，用户在n天内可以发起售后申请，设置0不允许申请售后</div>
                </div>
                
                <el-button color="var(--primary-theme-color)" size="small" type="primary" @click="saveShoppingSettings">保存</el-button>
            </div>
        </template>
    </el-card>
    <drawer ref="drawerRef" title="配置" direction="rtl" size="35%" @submit="submitHandle">
        <template #rtl>
            <ali ref="aliRef" v-if="currentPayWay === 1" />
            <wx ref="wxRef" v-if="currentPayWay === 2" />
        </template>
    </drawer>
</template>

<style lang="scss" scoped>
.pay-item {
    display: flex;
    align-items: center;

    .pay-item-icon {
        width: 35px;
        height: 35px;
        margin-right: 15px;
    }

    .pay-item-info {
        display: flex;
        flex-direction: column;

        .pay-item-title {
            font-size: 14px;
        }

        .pay-item-desc {
            font-size: 12px;
            color: #999;
        }
    }

}

.shopping-setting {
    padding: 20px 0;
    
    .setting-item {
        margin-bottom: 30px;
    }
    
    .setting-label {
        font-size: 14px;
        margin-bottom: 10px;
        font-weight: 500;
    }
    
    .setting-input {
        display: flex;
        align-items: center;
        margin-bottom: 10px;
        
        .el-input {
            width: 200px;
            margin-right: 10px;
        }
        
        .setting-button {
            background-color:#f0f0f0 ;
            color: var(--primary-theme-color);
            padding: 8px 15px;
            border-radius: 4px;
            font-size: 14px;
        }
    }
    
    .setting-desc {
        font-size: 12px;
        color: #999;
    }
}
</style>
